<template>
	<view class="home-homeNew">
		<!-- 分界线 -->
		<view class="xian"></view>
		<!-- 类别 -->
		<view class="sort-bar">
			<view v-for="(x,y) in sorts" :key="y" :class="{'selected' : y == selected}" @click="select(y)">{{x}}</view>
		</view>
		
		<view class="zlbs-list">
			<view class="zlbOne">
				<text>{{$t('home.homeNew.currency')}}</text>
				<text>{{$t('home.homeNew.algorithm')}}</text>
			</view>
			<view class="zlbTwo">
				<text>{{$t('home.homeNew.OreComPower')}}</text>
				<text>{{$t('home.homeNew.Currencyprice')}}</text>
			</view>
			<view class="zlbThree">
				<text>
					<image src="../../static/imgs/gywm.png" mode="" class="zlbThreeImg"></image>
					{{$t('home.homeNew.DailyIncome')}}
				</text>
				<text>{{$t('home.homeNew.coin')}}</text>
			</view>
		</view>
		
		<!-- 滚动试图容器 需要设置具体的宽高 并且设置对于的滚动方向才可以 内容滚动 -->
		<swiper :current="selected" @change="current" class="swiper" :style="{ height: swiperHeight + 'px' }">
			<swiper-item id="content-wrap0">
				<!-- 主流列表 -->
				<!-- <scroll-view scroll-y="true"> -->
					<view class="homes-list">
						<homes-list v-for="(x,y) in zls" :key="y" :list="x" type="zl"></homes-list>
					</view>
				<!-- </scroll-view> -->
			</swiper-item>

			<swiper-item id="content-wrap1">
				<!-- 创新列表 -->
				
				<!-- <scroll-view scroll-y="true"> -->
					<!-- <view class="homes-list">
						<homes-list v-for="(x, index) in cxs" :key="index" :list="x" cx="cx"></homes-list>
					</view> -->
					<view class="empty">暂无数据</view>
				<!-- </scroll-view> -->
			</swiper-item>
		</swiper>
		<!-- 分界线 -->
		<view class="xian"></view>
	</view>
</template>

<script>
	import list from '../../components/homes-list/homes-list.vue'
	import kj from '../../components/homes-kj/homes-kj.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue';
	import api from '../../common/api.js'
	export default {
		name: 'home',
		props: ["main_stream_list", "innovate_list"],
		components: {
			list,
			kj,
			xflSelect,
		},
		data() {
			return {
				selected: 0,
				zls: '',
				cxs: '',
				swiperHeight: '',
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.setSwiperHeight();
			});
		},
		computed: {
			sorts() {
				return [
					this.$t('home.homeNew.mianCoin'),
					this.$t('home.homeNew.Innovation')
				]
			},
		},
		watch: {
			'main_stream_list': function(val) {
				this.zls = val
			},
			'innovate_list': function(val) {
				this.cxs = val
			}
		},
		methods: {
			setSwiperHeight() {
				let element = "#content-wrap" + this.selected;
				console.log('element', element)
				let query = uni.createSelectorQuery().in(this);
				query.select(element).boundingClientRect();
				query.exec((res) => {
					console.log('element', res)
					if (res && res[0]) {
						this.swiperHeight = res[0].height;
						console.log('element', this.swiperHeight)
					}
				});
			},
			select(x) {
				this.selected = x
			},
			current(e) {
				this.selected = e.detail.current;
				// this.getSwiperHeight('.zlbs-list')
				this.$nextTick(() => {
					this.setSwiperHeight();
				});
			},
			getSwiperHeight(e) {
				let query = uni.createSelectorQuery().in(this);
				query.selectAll(e).boundingClientRect();
				query.exec((res) => {
					this.heights = 280 + res[0][this.selected].height
					console.log(this.heights);
				})
			},

		}

	}
</script>

<style scoped>
	.empty {
		text-align: center;
		margin-top: 200rpx;
		font-size: 28rpx;
		color: #99989D;
	}
	.home-homeNew {
		margin-bottom: 100rpx;
	}
	.zlbs-list {
		width: 94%;
		margin: auto;
		display: flex;
		justify-content: space-between;
		background-color: #FBF9FC;
	}

	.zlbOne {
		display: flex;
		flex-direction: column;
		width: 124rpx;
		font-size: 13px;
		font-weight: 400;
		color: #5D6067;
	}

	.zlbTwo {
		display: flex;
		flex-direction: column;
		font-size: 13px;
		font-weight: 400;
		color: #5D6067;
		width: 160rpx;

	}

	.zlbTwo>text:nth-of-type(2) {
		text-align: center;
		margin: auto;
	}

	.zlbThree {
		display: flex;
		flex-direction: column;
		width: 200rpx;
		font-size: 13px;
		font-weight: 400;
		color: #5D6067;
	}

	.zlbThreeImg {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		top: 2rpx;
		left: -10rpx;
	}

	.zlbThree>text:nth-of-type(2) {
		text-align: center;
		margin: auto;
	}

	.sort-bar {
		width: 80vw;
		height: 72rpx;
		display: flex;
		color: black;
		font-weight: 550;
		margin: 10rpx auto;
		margin-bottom: 14rpx;
	}

	.sort-bar>view {
		width: 42%;
		height: 100%;
		font-size: 1em;
		line-height: 60rpx;
		text-align: center;
		margin: auto;
	}

	.selected {
		background-color: #fff;
		font-weight: 700;
		border-bottom: 8rpx #207DFE solid;
		border-radius: 4rpx;
	}


	.swiper {
		width: 94vw;
		margin: 30rpx auto;
		margin-top: 0;
		height: 50vh;
	}

	.homes-list {
		margin: 10rpx 0;
		width: 100vw;
		height: 100rpx;
		display: flex;
		flex-wrap: wrap;

	}

	.zlb {
		width: 96%;
		height: 120rpx;
		margin-left: 16rpx;
	}
</style>
